<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--@@@@@<br/>-->
<!--@@@@@<br/>-->
<!--@@@@@<br/>-->
<!--@@@@@<br/>-->
<!--<div></div>-->
<!--<p></p>-->
<!--&lt;小明 &gt;-->


<!--@<br/>-->
<!--@@<br/>-->
<!--@@@<br/>-->
<!--@@@@<br/>-->
<!--@@@@@<br/>-->
<script>

    /*
    * 打印正方形
    *
    *   document.write();
    *       可以在页面上输出一些内容
    *           如果是文本，就会按照普通的文本的格式解析
    *           如果是标签，会被解析成标签格式
    *
    * */
//    document.write("小明今天又被老师赶出去了");
//    document.write("<div style='width: 200px;height: 200px;border: 1px solid #000;'></div>");


    /*
    * 最简单的做法
    *   输出多次  @@@@@  改内容
    * */

//    document.write("@@@@@<br>");
//    document.write("@@@@@<br>");
//    document.write("@@@@@<br>");
//    document.write("@@@@@<br>");

    /*
    * 循环的输出
    * */
//    for(var i = 0; i< 4; i++){
//        document.write("@@@@@<br>");
//    }

    /*
    *  发现
    *   document.write() 里面的内容也有重复的部分
    *       @@@@@
    *           把这个部分也可以改成循环的方式
    * */

//    document.write("@");
//    document.write("@");
//    document.write("@");
//    document.write("@");
//    document.write("@");
//    document.write("<br>");

    /*
    * 再使用循环完成
    * */
//    for(var j = 0; j < 5; j++){
//        document.write("@");
//    }
//    document.write("<br>");

    /*
    *  使用循环代替原来不是循环的
    *       document.write("@@@@@<br>");
    * */

//    for(var i = 0; i< 8; i++){
////        document.write("@@@@@<br>");
//        //替换为循环的输出@符号
//        for(var j = 0; j < 10; j++){
//            document.write("@");
//        }
//        document.write("<br>");
//    }

    /*
    *  嵌套循环如何分析：
    *       分开  不要把两个循环混合在一起理解
    *           只要是重复的代码，都可以使用循环来简化
    *
    * */

    /*
    *打印直角三角形
    * */


    /*
    * 最简单最好理解
    * */
//    document.write("@<br>");
//    document.write("@@<br>");
//    document.write("@@@<br>");
//    document.write("@@@@<br>");
//    document.write("@@@@@<br>");

    /*
    * 先使用嵌套循环完成正方形
    *
    *   观察发现：
    *       每一行输出@的个数是跟行数相关的
    *           输出的个数 = 行数
    * */
    /*for(var i = 1; i <= 5; i++){
        for(j  = 1 ; j <= i  ; j++){
            document.write("@");
        }
        document.write("<br>");
    }*/

//    for(var i = 0; i < 5; i++){
//        for(j  = 0 ; j <= i  ; j++){
//            document.write("@");
//        }
//        document.write("<br>");
//    }
</script>
</body>
</html>